import * as React from "react";
import { Row, Col, Form, Select, Modal } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import {
  getPeProtocalTypeList,
  getPfProtocalTypeList,
  addBaseProtocalParam,
} from "../ServeApi";
import UpdateItemData from "./compontents/updateItemData";
import { AjaxData } from "../../../../data/interface/publicInterface";
import "./index.less";

const { Option } = Select;

export interface AgreementProps {}

export interface AgreementState {
  dataSouce: any[];
  selePtData: any[];
  isUpdataVisible: boolean;
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
    md: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
    md: { span: 16 },
  },
};
class Agreement extends React.Component<AgreementProps, AgreementState> {
  state = {
    dataSouce: [],
    selePtData: [],
    isUpdataVisible: false,
  };
  updateItem: any | null = null;
  addInstance: any | null = null;
  isModalVisible: boolean = false;
  //   isUpdataVisible: boolean = false;
  render() {
    let { dataSouce, selePtData } = this.state;
    return (
      <div className="Agreement">
        <div className="Agreement_body">
          <Row style={{ marginLeft: -12, marginRight: -12, rowGap: 0 }}>
            <Col
              xs={24}
              sm={12}
              md={12}
              lg={12}
              xl={6}
              style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
            >
              <div
                className="box add"
                onClick={() => {
                  this.isModalVisible = true;
                  this.forceUpdate();
                }}
              >
                <PlusOutlined />
                新增协议
              </div>
            </Col>
            {dataSouce.map((item: any, index: number) => {
              return (
                <Col
                  xs={24}
                  sm={12}
                  md={12}
                  lg={12}
                  xl={6}
                  style={{
                    paddingLeft: 12,
                    paddingRight: 12,
                    marginBottom: 24,
                  }}
                  key={index}
                >
                  <div className="box argli">
                    <div className="text">
                      <h2>{item.name}</h2>
                    </div>
                    <div
                      className="btn txtCtenter"
                      onClick={() => {
                        this.updateItem = item;
                        this.setState({ isUpdataVisible: true });
                        this.forceUpdate();
                      }}
                    >
                      设置默认参数
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
        <UpdateItemData
          visible={this.state.isUpdataVisible}
          attr={this.updateItem}
          onOk={(adta: any) => {
            this.handUpdateOk(adta);
          }}
          onCancel={(adta: any) => {
            this.handUpdateCancel(adta);
          }}
        />
        <Modal
          title="添加协议类型"
          visible={this.isModalVisible}
          okText="确认"
          cancelText="取消"
          onOk={() => {
            this.handAddOk();
          }}
          onCancel={() => {
            this.handAddCancel();
          }}
        >
          <Form {...formItemLayout} ref={(el) => (this.addInstance = el)}>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="协议"
                  name="protocolId"
                  rules={[
                    {
                      required: true,
                      message: "协议类型必填",
                    },
                  ]}
                >
                  <Select placeholder="请选择协议类型">
                    {selePtData.map((item: any, index: number) => {
                      return (
                        <Option value={item.id} key={index}>
                          {item.name}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
  componentWillMount() {
    this.getDataList();
    this.getptList();
  }
  /**操作 */
  handUpdateOk(data: any) {
    this.setState({ isUpdataVisible: data.visible });
    this.forceUpdate();
  }
  handUpdateCancel(data: any) {
    this.setState({ isUpdataVisible: data.visible });
    this.forceUpdate();
  }
  //确认添加协议类型
  handAddOk() {
    let _this = this;
    const container: any = (this.addInstance as any) as HTMLDivElement;
    container
      .validateFields()
      .then((res) => {
        _this.AddItemDate(res);
        _this.clearAddModal();
      })
      .catch((err) => {
        console.log(err);
      });
  }
  //取消添加协议类型
  handAddCancel() {
    this.clearAddModal();
  }
  //清除新增弹窗
  clearAddModal() {
    if (this.addInstance) {
      const container: any = (this.addInstance as any) as HTMLDivElement;
      container.setFieldsValue({
        protocolId: undefined,
      });
    }
    this.isModalVisible = false;
    this.forceUpdate();
  }
  /**数据请求 */

  //添加新项目协议
  async AddItemDate(pream: any) {
    let res: any = await addBaseProtocalParam(JSON.stringify(pream)).catch(
      (err) => {
        console.log(err);
      }
    );
    let json: AjaxData = res;
    if (json.success) {
      this.getDataList();
    }
  }
  //获取项目协议参数列表
  async getDataList() {
    let res: any = await getPeProtocalTypeList().catch((err) => {
      console.log(err);
    });
    let json: AjaxData = res;
    if (json.success) {
      this.setState({ dataSouce: json.data });
    }
  }
  //获取平台协议参数列表
  async getptList() {
    let res: any = await getPfProtocalTypeList().catch((err) => {
      console.log(err);
    });
    let json: AjaxData = res;
    if (json.success) {
      this.setState({ selePtData: json.data });
    }
  }
}

export default Agreement;
